<template>
  <div>
    <el-form
      :model="productForm"
      :rules="productFormRules"
      ref="productFormRef"
      label-width="110px"
      label-position="right"
    >
      <el-form-item label="产品名称" prop="product_id">
        <el-select
          v-model="productForm.product_id"
          placeholder="请选择"
          filterable
          clearable
          @change="handleProductChange"
        >
          <el-option
            v-for="item in selectData.product"
            :key="item.id"
            :label="item.name + '【' + item.id + '】'"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="供应商" prop="provider_id">
        <el-select
          v-model="productForm.provider_id"
          placeholder="请选择"
          filterable
          clearable
        >
          <el-option
            v-for="item in selectData.provider"
            :key="item.id"
            :label="item.name + '【' + item.id + '】'"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="供应商产品ID" prop="joint">
        <el-input v-model="productForm.joint" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="有效期" required>
        <el-col :span="12">
          <el-form-item prop="valid">
            <el-input placeholder="请输入" v-model.number="productForm.valid">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="valid_unit">
            <el-select v-model="productForm.valid_unit" placeholder="请选择">
              <el-option label="日" value="日"></el-option>
              <el-option label="月" value="月"></el-option>
              <el-option label="年" value="年"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="限制使用区域" prop="area_limit_flag">
        <el-radio
          v-model="productForm.area_limit_flag"
          :label="typeof productForm.area_limit_flag == 'string' ? '1' : 1"
          @change="handleChangeAreaLimit"
          >限制</el-radio
        >
        <el-radio
          v-model="productForm.area_limit_flag"
          :label="typeof productForm.area_limit_flag == 'string' ? '0' : 0"
          @change="handleChangeAreaLimit"
          >不限制</el-radio
        >
      </el-form-item>
      <el-form-item
        label="区域限制方式"
        prop="area_limit_way"
        v-show="productForm.area_limit_flag == '1'"
        :rules="
          productForm.area_limit_flag == 1
            ? [{ required: true, message: '请选择', trigger: 'change' }]
            : []
        "
      >
        <el-select
          v-model="productForm.area_limit_way"
          placeholder="请选择"
          @change="changeRule"
        >
          <el-option
            :value="typeof productForm.area_limit_way == 'string' ? '1' : 1"
            label="按省份"
          ></el-option>
          <el-option
            :value="typeof productForm.area_limit_way == 'string' ? '2' : 2"
            label="按城市"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="使用区域范围"
        prop="range_name"
        v-show="productForm.area_limit_flag == '1'"
        :rules="
          productForm.area_limit_flag == 1
            ? [{ required: true, message: '请选择', trigger: 'change' }]
            : []
        "
      >
        <el-input placeholder="请选择" v-model="productForm.range_name">
          <el-link type="primary" slot="append" @click="openRangeDialog"
            >选择区域</el-link
          >
        </el-input>
        <el-input v-model="productForm.area_limit" v-show="false"> </el-input>
      </el-form-item>
      <el-form-item label="使用区域描述" prop="ranged_desc">
        <el-input
          v-model="productForm.ranged_desc"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="产品说明" prop="description">
        <el-input
          type="textarea"
          v-model="productForm.description"
          show-word-limit
          maxlength="500"
        ></el-input>
      </el-form-item>
    </el-form>

    <!-- 选择省份区域对话框 -->
    <chooseMultipleProvince
      :provinceVisible.sync="provinceVisible"
      :checkedRanges="checkedRanges"
      @showProvincesData="updateRanges"
    ></chooseMultipleProvince>

    <!-- 选择城市区域对话框 -->
    <ChooseMultipleCity
      :cityVisible.sync="cityVisible"
      :checkedRanges="checkedRanges"
      @showCitiesData="updateRanges"
    ></ChooseMultipleCity>
  </div>
</template>

<script>
import chooseMultipleProvince from '../region/ChooseMultipleProvince.vue'
import ChooseMultipleCity from '../region/ChooseMultipleCity.vue'
export default {
  components: {
    chooseMultipleProvince,
    ChooseMultipleCity
  },
  props: {
    supplierProductForm: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data() {
    return {
      productForm: {
        product_id: '',
        provider_id: '',
        joint: '',
        valid: '',
        valid_unit: '',
        area_limit_flag: 0,
        area_limit_way: '',
        range_name: '',
        area_limit: '',
        ranged_desc: '全国',
        description: '',
        product_name: ''
      },
      productFormRules: {
        product_id: [
          { required: true, message: '请选择产品名称', trigger: 'change' }
        ],
        provider_id: [
          { required: true, message: '请选择供应商', trigger: 'change' }
        ],
        joint: [{ required: true, message: '请输入', trigger: 'blur' }],
        valid: [
          { required: true, message: '请输入有效期', trigger: 'blur' },
          { type: 'number', message: '有效期必须为数字值', trigger: 'blur' }
        ],
        valid_unit: [{ required: true, message: '请选择', trigger: 'change' }],
        area_limit_flag: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        ranged_desc: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      selectData: [],

      // 省市控件勾选用的数据
      checkedRanges: [],
      provinceVisible: false,
      cityVisible: false
    }
  },
  created() {
    this.getSelectData()
    this.initData()
  },
  methods: {
    async getSelectData() {
      const { data: res } = await this.$http.post('/admin/data/find', {
        code: 'product,provider'
      })
      this.selectData = res.data
    },
    initData() {
      if (this.supplierProductForm.id != undefined) {
        // 不影响原数据的赋值
        this.productForm = JSON.parse(JSON.stringify(this.supplierProductForm))
      }
      // console.log(this.supplierProductForm.id)
    },
    // 产品名称传入
    handleProductChange(val) {
      const productObj = this.selectData.product.find(
        (item) => parseInt(item.id) === parseInt(val)
      )
      this.productForm.product_name = productObj.name
    },
    // 限制使用区域
    handleChangeAreaLimit(val) {
      if (val == 1) {
        this.productForm.area_limit_way = '1'
        this.productForm.ranged_desc = ''
      } else {
        this.productForm.area_limit_way = '0'
        this.productForm.ranged_desc = '全国'
      }
      this.productForm.range_name = ''
      this.productForm.area_limit = ''
      this.checkedRanges = []
    },
    changeRule() {
      this.productForm.range_name = ''
      this.productForm.area_limit = ''
      this.productForm.ranged_desc = ''
    },
    openRangeDialog() {
      if (this.productForm.area_limit_way === '') {
        this.$message({
          message: '请先选择区域限制方式',
          type: 'warning'
        })
      } else {
        if (parseInt(this.productForm.area_limit_way) === 1) {
          this.provinceVisible = true
        } else {
          this.cityVisible = true
        }
        // console.log(this.productForm.area_limit)
        this.checkedRanges = this.productForm.area_limit
          ? this.productForm.area_limit.split(',')
          : []
      }
    },
    updateRanges(data) {
      this.productForm.area_limit = data.code.join(',')
      this.productForm.range_name = data.name.join(',')
      this.productForm.ranged_desc = this.productForm.range_name
      // console.log(data)
    },
    validateForm() {
      let flag = null
      this.$refs.productFormRef.validate(async (valid) => {
        if (valid) {
          flag = true
          this.$emit('showProductFormData', this.productForm)
        } else {
          flag = false
        }
      })
      return flag
    }
  },
  watch: {
    supplierProductForm: {
      handler(newValue, oldValue) {
        // console.log('watch')
        // console.log(oldValue)
        console.log(newValue)
        this.initData()
      },
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
.el-form {
  width: 80%;
  margin-left: 15px;
  .el-select {
    width: 100%;
  }
}
</style>
